<template>
  <div class="q-pa-md">
    <!-- 操作工具栏 -->
    <div class="q-mb-md">
      <q-btn label="添加顶级菜单" color="primary" @click="openAddDialog(null)" />
      <q-btn label="批量删除" color="negative" class="q-ml-sm" @click="batchDelete" />
    </div>

    <!-- 菜单树形表格 -->
    <TreeTable :columns="columns" :data="menuData" ref="treeTable">
      <!-- 操作列插槽 -->
      <template #body-cell-actions="props">
        <q-td :props="props">
          <q-btn
            icon="add"
            dense
            flat
            color="positive"
            @click="openAddDialog(props.row)"
            title="添加子菜单"
          />
          <q-btn
            icon="edit"
            dense
            flat
            color="primary"
            class="q-mx-sm"
            @click="openEditDialog(props.row)"
            title="编辑"
          />
          <q-btn
            icon="delete"
            dense
            flat
            color="negative"
            @click="confirmDelete(props.row)"
            title="删除"
          />
        </q-td>
      </template>

      <!-- 状态列插槽 -->
      <template #body-cell-status="props">
        <q-td :props="props">
          <q-toggle
            :model-value="props.row.status"
            @update:model-value="toggleStatus(props.row, $event)"
            color="green"
          />
        </q-td>
      </template>
    </TreeTable>

    <!-- 表单对话框通过代码调用 -->
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useQuasar } from 'quasar'
import TreeTable from '@/components/common/FyTreeTable/FyTreeTable.vue'
import MenuForm from './components/MenuForm.vue'

const $q = useQuasar()

// 模拟数据
const menuData = ref([
  {
    id: 1,
    name: '系统管理',
    icon: 'settings',
    path: '/system',
    permission: 'system:view',
    sort: 1,
    type: 'menu',
    status: true,
    children: [
      {
        id: 2,
        name: '用户管理',
        icon: 'people',
        path: '/system/user',
        permission: 'user:view',
        sort: 1,
        type: 'menu',
        status: true,
      },
    ],
  },
])

// 表格列配置
const columns = [
  {
    name: 'name',
    label: '菜单名称',
    field: 'name',
    align: 'left',
  },
  {
    name: 'icon',
    label: '图标',
    field: 'icon',
    align: 'center',
  },
  {
    name: 'path',
    label: '路径',
    field: 'path',
    align: 'left',
  },
  {
    name: 'permission',
    label: '权限标识',
    field: 'permission',
    align: 'left',
  },
  {
    name: 'sort',
    label: '排序',
    field: 'sort',
    align: 'center',
  },
  {
    name: 'status',
    label: '状态',
    field: 'status',
    align: 'center',
  },
  {
    name: 'actions',
    label: '操作',
    align: 'center',
  },
]

// 打开添加对话框
const openAddDialog = (parent) => {
  console.log($q.dialog)
  $q.notify('123')
  $q.dialog({
    component: MenuForm,
    componentProps: {
      parent: parent,
      formData: {},
    },
  }).onOk((formData) => {
    addMenu(formData, parent)
  })
}

// 打开编辑对话框
const openEditDialog = (row) => {
  $q.dialog({
    component: MenuForm,
    componentProps: {
      formData: { ...row },
    },
  }).onOk((formData) => {
    updateMenu(row.id, formData)
  })
}

// 添加菜单
const addMenu = (formData, parent) => {
  const newMenu = {
    id: Date.now(),
    ...formData,
    children: [],
  }

  if (parent) {
    parent.children = parent.children || []
    parent.children.push(newMenu)
  } else {
    menuData.value.push(newMenu)
  }
}

// 更新菜单
const updateMenu = (id, formData) => {
  const menu = findMenu(menuData.value, id)
  if (menu) Object.assign(menu, formData)
}

// 切换状态
const toggleStatus = (row, status) => {
  row.status = status
  // 这里可以添加保存到后端的逻辑
}

// 删除确认
const confirmDelete = (row) => {
  $q.dialog({
    title: '确认删除',
    message: `确定要删除 ${row.name} 吗？`,
    cancel: true,
  }).onOk(() => {
    deleteMenu(row.id)
  })
}

// 递归查找菜单
const findMenu = (menuList, id) => {
  for (const menu of menuList) {
    if (menu.id === id) return menu
    if (menu.children) {
      const found = findMenu(menu.children, id)
      if (found) return found
    }
  }
  return null
}

// 删除菜单
const deleteMenu = (id) => {
  const removeFromParent = (menuList) => {
    return menuList.filter((menu) => {
      if (menu.id === id) return false
      if (menu.children) {
        menu.children = removeFromParent(menu.children)
      }
      return true
    })
  }
  menuData.value = removeFromParent(menuData.value)
}

// 批量删除
// const batchDelete = () => {
//   const selected = treeTable.value.selected
//   // 实现批量删除逻辑
// }
</script>
